{% extends 'base.html' %}
{% load staticfiles %}

{% block nav %}
<ul class="navbar-nav ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="{% url 'blog:index' %}">Home
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{% url 'blog:archives_page' %}">Archives</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{% url 'rss' %}">RSS</a>
  </li>
</ul>
{% endblock nav %}

{% block main %}

<!-- Post Content Column -->
<div class="col-lg-8">

  <!-- Title -->
  <h1 class="mt-4">{{ post.title }}</h1>

  <!-- Author -->
  <p>{{ post.created_time }} by <a href="#">{{ post.author }}</a></p>

  {% for tag in post.tags.all %}
    <span class="label label-success"> {{ tag.name }} </span>
  {% endfor %}

  <hr>

  <!-- Post Content -->
  {{ post.content|safe }}
  <hr>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Comment</h4>

          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <form action="{% url 'comments:post_comment' post.pk %}" method="post" class="comment-form">
          {% csrf_token %}
            <div class="form-group">
              <label for="{{ form.name.id_for_label }}">Name</label>
              {{ form.name }}
              {{ form.name.errors }}
            </div>
            <div class="form-group">
              <label for="{{ form.email.id_for_label }}">Email address</label>
              {{ form.email }}
              {{ form.email.errors }}
            </div>
            <div class="form-group">
              <label for="{{ form.content.id_for_label }}">Comment</label>
              {{ form.content }}
              {{ form.content.errors }}
              <!--<textarea class="form-control" rows="3"></textarea>-->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Single Comment -->
  <div class="media mb-4">
    <h4 class="mt-0">
      Comments({{ post.comment_set.count }})
      <!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">-->
      <!--Add Your Comment-->
      <!--</button>-->
      <a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target="#myModal">Add Your Comment</a>
    </h4>
  </div>
  {% for comment in comment_list %}
  <div class="media mb-4">
    <img class="d-flex mr-3 rounded-circle" src="{% static 'blog/img/a.jpg' %}" alt="" width="50" height="50">
    <div class="media-body">
      <h5 class="mt-0">{{ comment.name }}</h5>
        {{ comment.content }}
    </div>
  </div>
  {% empty %}
  <div class="media mb-4">
    <div class="media-body">
      <h5 class="mt-0">Not Comment!</h5>
    </div>
  </div>
  {% endfor %}



</div>


{% endblock main %}